<template>
	<view class="container">
		<navbar title="推广统计"></navbar>
		<view class="wrap">
			<view class="total-bg">
				<image src='../static/strip.png'></image>
				<view class="total-bg-con">
					<view class="title">团队人数(人）</view>
					<view class="num">{{total ? total : 0}}</view>
				</view>
			</view>
			<view class="list-wrap" v-if='list.length > 0'>
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="user-wrap">
						<view class="user-img">
							<image src='/static/user/user-default.png' v-if='!item.avatar'></image>
							<image :src='item.avatar' v-else></image>
						</view>
						<view class="user-right">
							<view class="user-nick">{{item.nickname}}</view>
							<view class="user-tip line-center">{{item.is_share == 0 ? '普通用户':'分销商'}}</view>
						</view>
					</view>
					<view class="right-wrap">
						<view>{{item.mobile}}</view>
						<view class="time">加入时间：{{item.bind_parent_time}}</view>
					</view>
				</view>
				<loading :loadEnd='loadEnd'></loading>
			</view>
			<view v-else>
				<no-data></no-data>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				page:1,
				totalPage:'',
				list:[],
				total:0,
				loadEnd:false,
			};
		},
		onLoad() {
			this.getTeam()
		},
		onReachBottom() {
			let that = this;
			if (that.page < that.totalPage) {
				this.loadEnd = false;
				that.page++;
				that.getTeam()
			} else {
				return;
			}
		},
		onPullDownRefresh() {
			this.list = [];
			this.page = 1;
			this.totalPage = '';
			this.getTeam();
			uni.stopPullDownRefresh()
		},
		methods:{
			getTeam(){
				let that = this;
				app.globalRequest({
					api: app.getApi().promotion.teamList,
					data:{
						page: this.page,
						limits: 15,
					}
				}).then(res => {
					if (res.code == 0) {
						that.list = that.list.concat(res.data.data);
						that.totalPage = res.data.last_page;
						that.total = res.data.total;
						if (that.totalPage == that.page) {
							that.loadEnd = true;
						}
					}
				}).catch(err => {
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.total-bg{
		width: 702rpx;
		height: 162rpx;
		margin:24rpx auto 0;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
		.total-bg-con{
			width: 100%;
			height: 100%;
			position: absolute;
			left:0;
			top:0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.title{
				font-size: 24rpx;
				color: #A15C34;
			}
			.num{
				font-family: 'DIN-BOLD';
				font-size: 48rpx;
				line-height: 50rpx;
				color: #6B3115;
				position: relative;
				left:-30rpx;
				margin-top:20rpx;
			}
		}
	}
	.list-wrap{
		margin:0 24rpx;
		padding-bottom: 80rpx;
		.list-item{
			height: 164rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding:0 18rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top:24rpx;
			.user-wrap{
				display: flex;
				align-items: center;
			}
			.user-img{
				width: 128rpx;
				height: 128rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 100%;
				box-sizing: border-box;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.user-right{
				flex:1;
				overflow: hidden;
				margin-left:16rpx;
				.user-nick{
					width: 260rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.user-tip{
					width: 116rpx;
					height: 36rpx;
					background: #E6E6E6;
					border-radius: 18rpx;
					color:#fff;
					font-size: 24rpx;
					margin-top:6rpx;
				}
				
			}
			.right-wrap{
				flex:1;
				text-align: right;
				.time{
					font-size: 24rpx;
					color:#DEDBDB;
					padding-top:10rpx;
				}
			}
			
		}
	}

</style>
